<template>
	<view>
		<view class="content-box">
			<view v-for="item in selectedItems" :key="item.id" @click="goToDetail(item.id)">
				<view class="list-item">{{ item.title }}</view>
			</view>
			<p v-if="!selectedItems.length">暂无数据</p>
		</view>
	</view>
</template>

<script>
	import tabbar from '../../uni_modules/uview-ui/libs/config/props/tabbar';
	export default {
		name: "TabContent",
		props: {
			name: String,
			tabId: Number
		},
		data() {
			return {
				items: {
					关注: [{
							id: 1,
							title: "关注项目 A"
						},
						{
							id: 2,
							title: "关注项目 B"
						},
						{
							id: 3,
							title: "关注项目 C"
						}
					],
					推荐: [{
							id: 4,
							title: "推荐项目 D"
						},
						{
							id: 5,
							title: "推荐项目 E"
						},
						{
							id: 6,
							title: "推荐项目 F"
						}
					]
				},
				selectedItems: {}
			};
		},
		mounted() {
			this.fetchData();
		},
		methods: {
			fetchData() {
				//从后端获取数据的代码
				
				//把数据保存到data的item中
				
				//在item中根据tabId筛选点击的tab对应的数据 赋值给selectedItem进行渲染
				if (this.tabId === 0) {
					this.selectedItems = this.items.关注;
				} else if (this.tabId === 1) {
					this.selectedItems = this.items.推荐;
				} else {
					// 如果 tabId 不是 1 或 2，可以选择设置为一个空数组或者其他默认值
					this.selectedItems = [];
				}
			},

			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}` // 跳转到详情页面，传递 id
				});
			}
		}
	};
</script>

<style lang="scss">
	.content-box {
		padding: 16px;
		border: 1px solid #ddd;
		margin-top: 8px;
	}

	.list-item {
		padding: 10px;
		border: 1px solid #ccc;
		margin-top: 8px;
		cursor: pointer;
	}

	.list-item:hover {
		background-color: #f5f5f5;
	}
</style>
